<template>
  <div class="personalCenter">
    <div class="intro">
      <div class="portraitImg">
        <img :src="userInfo.avatar ? userInfo.avatar : imgUrl" />
      </div>
      <div class="desc">
        <p class="p1">{{ userInfo.cust_name }}</p>
        <div class="p2">{{ userInfo.user_name }}</div>
      </div>
    </div>
    <div class="myOrder">
      <div class="myTit">
        我的订单
      </div>
      <div class="dingBox">
        <div class="ding" @click="goOrder('payment')">
          <!-- <van-badge :content="20" /> -->
          <!-- <van-badge :content="5"> -->
          <em class="badge" v-if="badge.payment">{{ badge.payment }}</em>
          <van-icon name="cash-on-deliver" size="35px" color="#333" />
          <span>未付款</span>
          <!-- </van-badge> -->
          <!-- <img src="../../assets/img/order1.png" alt="" /> -->
        </div>
        <div class="ding" @click="goOrder('delivery')">
          <!-- <img src="../../assets/img/order1.png" alt="" /> -->
          <em class="badge" v-if="badge.delivery">{{ badge.delivery }}</em>

          <van-icon name="send-gift-o" size="35px" color="#333" />
          <span>待发货</span>
        </div>
        <div class="ding" @click="goOrder('received')">
          <!-- <img src="../../assets/img/order2.png" alt="" /> -->
          <em class="badge" v-if="badge.received">{{ badge.received }}</em>

          <van-icon name="logistics" size="35px" color="#333" />
          <span>待收货</span>
        </div>
        <div class="ding" @click="goOrder('sale')">
          <!-- <img src="../../assets/img/order3.png" alt="" /> -->
          <em class="badge" v-if="badge.sale">{{ badge.sale }}</em>

          <van-icon name="refund-o" size="35px" color="#333" />
          <span>寄售中</span>
        </div>
        <div class="ding" @click="goOrder()">
          <!-- <img src="../../assets/img/order4.png" alt="" /> -->
          <van-icon name="orders-o" size="35px" color="#333" />
          <span>我的订单</span>
        </div>
      </div>
    </div>
    <div class="myList">
      <!-- <van-cell title="我的商品" is-link /> -->
      <van-cell title="地址管理" is-link @click="goAddress" />
      <van-cell title="设置" is-link @click="set" />
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Icon } from "vant";

Vue.use(Icon);
// import { Badge } from "vant";

// Vue.use(Badge);
import apiMar from "@/api/api";
export default {
  components: {},
  data() {
    return {
      userInfo: {},
      imgUrl: require("../../assets/img/head.png"),
      badge: {}
    };
  },
  computed: {},
  watch: {},
  methods: {
    getData() {
      let params = {};

      apiMar
        .orderNum(params)
        .then(res => {
          console.log(res, "订单数量");
          this.badge = res;
        })
        .catch(err => {
          // this.$Message.error(err)
        });
    },
    goOrder(val) {
      this.$router.push({
        path: "/order",
        query: {
          val: val
        }
      });
    },
    goAddress() {
      this.$router.push({
        path: "/address"
      });
    },
    set() {
      this.$router.push({
        path: "/oauth"
      });
    }
  },
  created() {
    this.userInfo = this.$tool.getlocalStorage("userInfo")
      ? JSON.parse(this.$tool.getlocalStorage("userInfo"))
      : "";
    this.getData();
  },

  mounted() {}
};
</script>
<style lang="scss" scoped>
.personalCenter {
  width: 90%;
  margin: 0 auto;

  .myOrder {
    margin-top: 20px;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 8px rgba(184, 182, 182, 0.22);
    border-radius: 6px;

    .myTit {
      font-size: 14px;
      font-weight: bold;
      border-bottom: 1px solid #ebedf0;
      height: 45px;
      line-height: 45px;
      padding-left: 16px;
    }

    .dingBox {
      margin-top: 16px;
      padding-bottom: 10px;
      display: flex;
      flex-direction: row;
      justify-content: space-around;

      .ding {
        width: 25%;
        text-align: center;
        position: relative;

        .badge {
          width: 20px;
          height: 20px;
          color: #fff;
          background: red;
          border-radius: 50%;
          line-height: 20px;
          text-align: center;
          position: absolute;
          top: -10px;
          right: 10px;
          font-style: normal;
          z-index: 9;
        }

        img {
          display: block;
          width: 30px;
          height: 30px;
          margin: 0 auto;
        }

        span {
          display: block;
          font-size: 14px;
          line-height: 2;
          text-align: center;
          color: #333;
        }
      }
    }
  }

  .myList {
    // padding:15px 0;
    margin-top: 20px;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 8px rgba(184, 182, 182, 0.22);
    border-radius: 6px;
  }

  .intro {
    padding: 15px;
    margin-top: 20px;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 8px rgba(184, 182, 182, 0.22);
    border-radius: 6px;
    display: flex;
    flex-direction: row;
    align-items: center;

    .portraitImg {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      overflow: hidden;

      img {
        display: block;
        width: 100%;
        border-radius: 50%;
      }
    }

    .desc {
      padding-left: 10px;
      flex: 1;

      .p1 {
        font-size: 14px;
        font-weight: bold;
        color: #333;
        line-height: 1.4;
      }

      .p2 {
        font-size: 13px;
        color: #999;
        line-height: 1.4;
      }
    }
  }
}
</style>
